<template>
  <div class="grades">
    <div class="header">
      <el-row style="margin-top: -20px">
        <el-col :span="6">
          <el-input
            placeholder="请输入科目编码"
            prefix-icon="el-icon-search"
            v-model="input1"
          >
          </el-input>
        </el-col>
        <el-col :span="2"><el-button type="primary">搜索</el-button></el-col>
      </el-row>
    </div>
    <div class="section">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{ 'text-align': 'center' }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          fixed
          width="206"
          v-for="item in infoList"
          :key="item.key"
          :label="item.label"
          :prop="item.key"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row)
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 2) {
        return 'success-row'
      } else {
        return ''
      }
    },
  },

  data() {
    return {
      infoList: [
        {
          label: '序号',
          key: 'serial',
        },
        {
          label: '学号',
          key: 'id',
        },
        {
          label: '姓名',
          key: 'name',
        },
        {
          label: '课程编码',
          key: 'code',
        },
        {
          label: '课程名称',
          key: 'courseName',
        },
        {
          label: '课程学分',
          key: 'credit',
        },
        {
          label: '课程学时',
          key: 'hours',
        },
        {
          label: '成绩',
          key: 'grade',
        },
      ],
      tableData: [
        {
          serial: '111',
          id: 1,
          name: '张三',
          code: '0100',
          courseName: '物理',
          credit: '2.5',
          hours: '12',
          grade: '95',
        },
        {
          serial: '222',
          id: 2,
          name: '李四',
          code: '0101',
          courseName: '英语',
          credit: '4.5',
          hours: '12',
          grade: '86',
        },
        {
          serial: '333',
          id: 3,
          name: '王麻子',
          code: '0102',
          courseName: '数学',
          credit: '6',
          hours: '10',
          grade: '101',
        },
        {
          serial: '444',
          id: 4,
          name: '乐高',
          code: '0103',
          courseName: '数学',
          credit: '6',
          hours: '10',
          grade: '101',
        },
        {
          serial: '555',
          id: 5,
          name: '别墅',
          code: '0104',
          courseName: '数学',
          credit: '6',
          hours: '10',
          grade: '101',
        },
        {
          serial: '666',
          id: 6,
          name: '别墅',
          code: '0105',
          courseName: '数学',
          credit: '6',
          hours: '10',
          grade: '101',
        },
      ],
      input1: '',
    }
  },
}
</script>

<style lang="less">
.grades {
  width: 100%;
  height: 100%;
  // background-color: aquamarine;
  .header {
    width: 100%;
    height: 120px;
    // background-color: blueviolet;
    overflow: hidden;
  }
  .footer {
    height: 200px;
    width: 100%;
    margin-top: 29px;
    position: relative;
  }
  .el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    position: absolute;
    right: -10px;
  }
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
